<template>
  <div class="login">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>通用后台管理系统</span>
          </div>
          <el-form label-width="80px" :model="form" ref="from" :rules="loginRules">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login('from')">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  </div>
</template>
<script>
import {ruleName,rulePass } from '@/utils/validate.js'
import {setToken } from '@/utils/token.js'
import {loginApi} from '@/api/api.js'
export default{
  name:'Login',
  data(){
    // // 验证用户名   
    // let checkName = (rule, value, callback)=>{
    //      // 4-10位
    //      let regName = /(^[a-zA-Z0-9]{4,10}$)/;
    //      if(value===''){
    //        callback(new Error('请输入用户名'))
    //      }
    //      else if(!regName.test(value)){
    //        callback(new Error('请输入4-10位用户名'))
    //     }else{
    //        callback()
    //     }
    // };
    // // 验证密码  按 f1 可以利用 正则插件  搜索需要的
    // let checkPass = (rule, value, callback)=>{
    //      // 6-12位密码需要包含大小写字母和数字和特殊符号
    //      let regPass = /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;  //  
    //      if(value===''){
    //        callback(new Error('请输入密码'))
    //      }
    //      else if(!regPass.test(value)){
    //        callback(new Error('6-12位密码需要包含大小写字母和数字和特殊符号'))
    //     }else{
    //        callback()
    //     }
    // };
    return{
      form:{
        username:'admin',
        password:'2As@#23ws',
      },
      loginRules:{
        username:[
              { required: true, message: '请输入用户名', trigger:'blur' },
              // { validator: checkName, trigger: 'blur' },
              { validator: ruleName, trigger: 'blur' },
            ],
        password:[
              { required: true, message: '请输入用户名', trigger:'blur' },
              //{ validator: checkPass, trigger: 'blur' },
              { validator: rulePass, trigger: 'blur' }
            ],
       }
    }
  },
  methods:{
    login(form){
       this.$refs[form].validate(async valid=>{
          if(valid){
          // 登录调用接口 封装成 api 进行调用
          //  const res =await this.axios.post('/login',this.form)
          //  if(res.data.status ===200){
          //   setToken('username',res.data.username)
          //   setToken('token',res.data.token)
          //   this.$message({message:res.data.message,type:'success'})
          //   this.$router.push('/home')
          //  }
          //  console.log('11',res)

            const res =await loginApi(this.form)
            if(res.data.status ===200){
                setToken('username',res.data.username)
                setToken('token',res.data.token)
                this.$message({message:res.data.message,type:'success'})
                this.$router.push('/home')
            }

          }else{

          }
       })
    }
  }
}
</script>
<style lang="scss" scoped>
.login{
  width:100%;
  height:100%;
  position:absolute;
  background:#409eff;
  .box-card{
    width:450px;
    margin:200px auto;
    .el-card__header{
      font-size:30px;
      text-align: center;
    }
  }
  .el-button{width:100%}
}

</style>